<template>
  <view class="">
    <view class="header">
      <u-navbar title="购物列表" :autoBack="true" leftIconColor="#fff" :titleStyle="{ color: '#fff' }" bgColor="rgba(0,0,0,0)"></u-navbar>
    </view>
    <view class="main">
      <view class="firstLine">
        <view class="left">供应商明辉蔬果</view>
        <view class="right"><u-icon name="trash" size="22"></u-icon></view>
      </view>
      <HengGoodsItem v-for="(item, index) in orderList" :key="index" :info="item">
        <template #remark>
          <view class="spbz"> +添加备注 </view>
        </template>
      </HengGoodsItem>
      <view class="labelLine">
        <view class="label">运费：</view>
        <view class="value">+￥0.00</view>
      </view>
      <view class="labelLine">
        <view class="label">总计：</view>
        <view class="value" style="color: #f35555">￥66.00</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import HengGoodsItem from "../../components/hengGoodsItem.vue";

import { ref } from "vue";
import { goPage } from "../../utils/commonFn";
const orderList = ref([{}, {}]);
</script>

<style lang="less" scoped>
.header {
  height: 108rpx;
}
.main {
  background: #fff;
  padding: 32rpx;
  margin-bottom: 16rpx;
  margin-top: -100rpx;
  border-radius: 16rpx;
}
.firstLine {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #f5f5f5;
  .left {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333333;
    line-height: 44rpx;
    font-weight: 600;
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #21cca2;
    line-height: 36rpx;
  }
}
.labelLine {
  display: flex;
  font-size: 26rpx;
  justify-content: space-between;
  margin-top: 20rpx;
  .label {
    color: #333333;
  }
  .value {
    display: flex;
    align-items: center;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #333333;
  }
  &:first-child {
    margin-top: 0rpx;
  }
}
.spbz {
  width: 146rpx;
  border-radius: 8rpx;
  border: 2rpx solid #f7f7f7;
  padding: 8rpx;
  font-size: 24rpx;
  color: #bebebe;
  text-align: center;
  margin-top: 12rpx;
}
</style>
